<template>
  <div class="page" :style="{minHeight:docHeight}">
    <LeftSideBar></LeftSideBar>
    <div class="content-main clearfix">
      <ELHeader></ELHeader>
      <div class="right-content clearfix">
        <el-upload
        class="upload-clients"
        action="//jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
  @import '../scss/index';
    .echarts {
        height: 300px
    }

    .content-main{
      height: 0;
      position: relative;
      float: left;
      min-height: 100%;
      width: 85%;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .right-content{
      padding-left: 20px;
      margin-top: 70px;
      padding-bottom: 100px;
      width: 100%;
    }

    .echart-line{
      width: 100%;
      height: 400px;
    }
</style>

<script>
import Header from 'components/AdminHeader'
import LeftSideBar from 'components/LeftSideBar'
import { Col, Popover, Button, Upload } from 'element-ui'

export default {
  data () {
    return {
      showUserPanel: false,
      docHeight: window.innerHeight + 'px',
      screenWidth: document.body.clientWidth,
      resize: false
    }
  },

  watch: {
    screenWidth (val) {
      if (!this.timer) {
        this.screenWidth = val
        this.timer = true
        const that = this

        setTimeout(function () {
          that.resize = !that.resize
          that.timer = false
        }, 400)
      }
    }
  },

  mounted: function () {
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }
  },

  components: {
    ELHeader: Header,
    LeftSideBar: LeftSideBar,
    [Popover.name]: Popover,
    [Button.name]: Button,
    [Upload.name]: Upload,
    'el-col': Col
  }
}

</script>
